<script setup>
import { ref, watch } from "vue";
import "@material/web/dialog/dialog.js";

const props = defineProps(["open", "type"]);
const emit = defineEmits(["close"]);
const dialog = ref(null);
defineExpose({ dialog });

watch(() => props.open, async (now, old) => {
  if (now && !old) {
    dialog.value.show();
  } else if (!now && old) {
    dialog.value.close();
  }
});
</script>

<template>
  <Teleport to="#wrapper">
    <md-dialog ref="dialog" :type="type || 'alert'" @closed="$emit('close')">
      <div slot="headline" role="presentation">
        <slot name="headline"></slot>
      </div>
      <div slot="content" role="presentation">
        <slot name="content"></slot>
      </div>
      <div slot="actions" role="presentation">
        <slot name="actions"></slot>
      </div>
    </md-dialog>
  </Teleport>
</template>
